<template>
  <AppHeader title="音标测试" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
    <template #right>
      <img
        @click="onClickRight"
        src="@/assets/images/listening/copy.png"
        width="18"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
      <div style="padding-bottom: 80px;">
        <template v-for="(item,index) in list" :key="item.sid">
          <div class="top">{{index + 1}}、{{item.module_type_name}}</div>
          <div class="options-list" >
            <span v-for="i in item.children.length" :key="i":class="item.children[i-1].answer.sType && item.children[i-1].answer.isAnswer ? 'circle-blue': item.children[i-1].answer.sType && !item.children[i-1].answer.isAnswer ? 'circle-red' : ''">{{i}}</span>
          </div>
        </template>
      </div>
    <van-dialog v-model:show="show" title="提示" show-cancel-button @confirm="confirm">
      <div style="width: 80%;margin:20px auto;">您还有{{NotDone}}道题目未完成，确定交卷吗?</div>
    </van-dialog>
    <div class="btn" @click="submit">
      <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">交作业</van-button>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import {onMounted ,ref} from 'vue'
import { showDialog } from 'vant';
import { saveExercise } from "@/api/writtenTest";
const router = useRouter();
const list = ref([])
const NotDone = ref(0)
const onClickLeft = () => {
  router.back();
};
const onClickRight = () => { 
  router.push('/phoneticSymbol/reaticTest')
}
var subMitObj = JSON.parse(sessionStorage.getItem('soundmark'))
const show = ref(false)
const submit = () => { 
  NotDone.value = 0
  list.value.forEach(item=>{
    if(item.children.length){
      item.children.forEach(i=>{
        if(i.answer.sorce === -1){
          NotDone.value ++ 
        }
      })
    }
  })
  if(NotDone.value > 0){
    show.value=true
  }else{
    confirm()
  }
}
const confirm = ()=>{
  var answer_score_json = []
  list.value.forEach(item=>{
    if(item.children.length){
      item.children.forEach(i=>{
        answer_score_json.push({
          score:i.answer.sorce,
          color:(i.answer.isAnswer && i.answer.sorce) ? 'green' :  (!i.answer.isAnswer && i.answer.sorce === 0) ? 'red' : 'yellow'
        })
      })
    }
  })
  var params = {
    source_id:subMitObj.id ,
    question_type:0,
    question_source_type:4,
    use_time:sessionStorage.getItem('time') * 1,
    answer_score_json:JSON.stringify(answer_score_json),
    total_score:subMitObj.ref_score,
    json:JSON.stringify(subMitObj)
  }
  saveExercise(params).then(res=>{
    sessionStorage.setItem('successObj',JSON.stringify(res.data))
    router.push('/phoneticSymbol/reatScore')
  })
}
onMounted(()=>{
  list.value = JSON.parse(sessionStorage.getItem('soundmark')).resource.parts
})
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  overflow-y: auto;
 .top{
  font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
color: #333333;
line-height: 22px;
text-align: left;
font-style: normal;
padding: 15px 10px;
 }
.options-list{
  padding: 15px 10px;
  span{
margin: 7.5px;
width: 48px;
height: 48px;
border: 1px solid #E5E5E5;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 46px;
text-align: center;
font-style: normal;
display: inline-block;
    border-radius: 50%;
&.circle-blue{
  border: 1px solid #0CB76C;
  color: #0CB76C;
}

&.circle-red{
  border: 1px solid #FA192C;
  color: #FA192C;
}
  }
}
 .btn{ padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
